ARTICLES > Javascript

Jquery Input calendar datepicker Turn Back

2016-09-09 12:29:10

datepicker เป็นสคริปท์ที่ถูกใช้งานค่อนข้างบ่อยครั้ง  สำหรับผู้ที่ต้องเขียน form input วัน/เดือน/ปี
และส่วนตัวผมก็ใช้แทบทุกเว็บไซต์ที่มี back office  เมื่อเวลาจะใช้ที ก็หลงๆลืมๆ ว่าจะใช้ไฟล์ไหนหรือฟังก์ชั่นอะไรบ้าง
ผมเลยถือโอกาสนี้ นำมันมารวบรวมไว้บนเว็บฯ ซะเลย  เพื่อง่ายต่อการหยิบไปใช้  จะได้ไม่เปลืองเมมของสมอง ที่นับวันยิ่งเสื่อยถอยตามกลาะเวลา

1. Date Picker แบบ เดือนไทย ปี พ.ศ.

<!DOCTYPE html>
<html>
<head>
<title>Thai Date Picker</title>
<meta charset="utf-8" />
<link href='css/jquery-ui-1.8.10.custom.css' rel='stylesheet' type='text/css'/>
 
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.datepick.js"></script>
 
<script type="text/javascript">
<!-- 
$(document).ready(function() {
        var d = new Date();
        d.setDate(d.getDate());
        var toDay = d.getDate() + '/' + (d.getMonth() + 1) + '/' + (d.getFullYear()+543);
 
        $(".current").datepicker({ 
              buttonImage: 'images/ico-calendar.gif', 
              showOn: 'both', 
              buttonImageOnly: true, 
              changeMonth: true, 
              changeYear: true, 
              dateFormat: 'dd/mm/yy', 
              isBuddhist: true, 
              defaultDate: toDay, 
              dayNames: ['อาทิตย์', 'จันทร์', 'อังคาร', 'พุธ', 'พฤหัสบดี', 'ศุกร์', 'เสาร์'],
              yearRange: "-1:+1",
              dayNamesMin: ['อา.', 'จ.', 'อ.', 'พ.', 'พฤ.', 'ศ.', 'ส.'],
              monthNames: ['มกราคม', 'กุมภาพันธ์', 'มีนาคม', 'เมษายน', 'พฤษภาคม', 'มิถุนายน', 'กรกฎาคม', 'สิงหาคม', 'กันยายน', 'ตุลาคม', 'พฤศจิกายน', 'ธันวาคม'],
              monthNamesShort: ['ม.ค.', 'ก.พ.', 'มี.ค.', 'เม.ย.', 'พ.ค.', 'มิ.ย.', 'ก.ค.', 'ส.ค.', 'ก.ย.', 'ต.ค.', 'พ.ย.', 'ธ.ค.']
        });
});
// -->
</script>
</head>
<body>
Date <input name="date" class="current" />
</body>
</html>

 

Download โค้ดสคริปท์ทั้งหมด datePicker-TH.zip

 

 

Turn Back